$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;

  .container {
    position: relative;
    .banner {
      width: 100%;
      position: relative;

      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: linear-gradient(110deg, #C9DBEC 0.46%, #C8D7EA 11.4%, rgba(225, 236, 249, 0.96) 34.4%, rgba(234, 245, 255, 0.86) 46.39%, rgba(234, 245, 255, 0.31) 61.38%, rgba(234, 245, 255, 0.00) 88.26%);
      }

      .bg {
        img {
          width: 100%;
          display: block;
          object-fit: cover;
        }
      }

      .text {
        position: absolute;
        left: 10vw;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;

        .p1 {
          color: #030303;
          font-size: $fontSize_54;
          font-weight: bold;
          display: flex;
          align-items: flex-start;

          svg {
            width: 21/$f+vw;
            display: block;
            margin: 0.7vw 0 0 0.7vw;
          }
        }

        .p2 {
          color: #464646;
          font-size: $fontSize_36;
          margin-top: 0.6vw;
            font-family: 'SourceHanSansCN-Light';
        }
      }
    }

    .main {
      margin: 5vw 10vw 8vw 10vw;

      .types {
        display: flex;
        border-bottom: 1px solid #CFCFCF;

        a {
          color: #000;
          font-size: $fontSize_22;
          padding: 0.4vw 2.2vw;
          transition: all 600ms;

          &:hover {
            background: #0060B0;
            color: white;
          }
        }

        .active {
          background: #0060B0;
          color: white;
        }
      }

      .thead{
        display: flex;
        color: rgba(0,0,0,.5);
        font-size: $fontSize_16;
        margin: 2vw 0 3vw 0;
        .t1{
          width: 65%;
          text-indent: 70/$f+vw;
        }
        .t2{
          width:15%;
        }
        .t3{
          width: 20%;
        }
      }
      .list{
        .item{
          display: flex;
          margin-bottom: 1.6vw;
          align-items: center;
          .t1{
            width: 65%;
            display: flex;
            align-items: center;
            .icon{
              width: 70/$f+vw;
              img{
                max-width: 60/$f+vw;
              }
            }
            .pt{
              color: #000;
              font-size: $fontSize_22;
              font-weight: 600;
            }
          }
          .t2{
            width:15%;
            color: #464646;
            font-size: $fontSize_22;
            font-weight: 500;
          }
          .t3{
            width: 20%;
            display: flex;
            align-items: center;
            a:first-child{
              color: #0060B0;
              font-size: $fontSize_22;
            }
            a:last-child{
              display: flex;
              align-items: center;
              border: 1px solid #CFCFCF;
              padding: 0.4vw 2vw;
              color: #000;
              font-size: $fontSize_22;
              margin-left: 1.5vw;
              transition: all 600ms;
              svg{
                display: block;
                margin-right: 0.3vw;
                width: 28/$f+vw;
                path{
                  fill:rgba(0, 96, 176, 1);
                  transition: all 600ms;
                }
              }
              &:hover{
                background-color: rgba(0, 96, 176, 1);
                border-color:rgba(0, 96, 176, 1) ;
                color:white;
                svg{
                  path{
                    fill: white;
                  }
                }
              }
            }
          }
        }
      }


      .pager {
        display: flex;
        justify-content: flex-end;
        margin-top: 4vw;
        .prev,
        .next {
          background-color: rgba(182, 187, 193, .2);
          width: 46/$f+vw;
          height: 46/$f+vw;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 600ms;

          svg {
            display: block;

            path {
              transition: all 600ms;
            }
          }

          &:hover {
            background: #0060B0;

            svg {
              path {
                stroke: white;
              }
            }
          }
        }

        .nums {
          display: flex;
          margin: 0 0.5vw;

          a {
            border: 1px solid #CFCFCF;
            width: 46/$f+vw;
            height: 46/$f+vw;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 600ms;
            color: #000;
            font-size: $fontSize_16;
            margin: 0 0.3vw;

            &:hover {
              background: #0060B0;
              color: white;
              border-color: #0060B0;
            }
          }

          .active {
            background: #0060B0;
            color: white;
            border-color: #0060B0;
          }
        }
      }
    }
  }



  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .container{
      .banner{
        .bg{
          img{
            height: 150px;
          }
        }
        .text{
          left: 5%;
          .p1{
            font-size:24px;
            svg{
              width: 10px;
            }
          }
          .p2{
            font-size: 18px;
          }
        }
      }
      .main{
        margin: 20px 5% 60px 5%;
        .types{
          a{
            font-size: 14px;
            padding: 5px 20px;
          }
        }
        .thead{
          font-size: 14px;
          margin: 15px  0 20px 0;
          .t1{
            width: 80%;
            text-indent: 40px;
          }
          .t2{
            width: 20%;
          }
          .t3{
            display: none;
          }
        }
        .list{
          .item{
            margin-bottom: 10px;
            flex-wrap: wrap;
            .t1{
              width: 80%;
              .icon{
                width: 40px;
                img{
                  max-width: 30px;
                }
              }
              .pt{
                font-size: 14px;
              }
            }
            .t2{
              width: 20%;
              font-size: 14px;
            }
            .t3{
              width: 100%;
              margin: 10px 0;
              justify-content: flex-end;
              a{
                font-size: 14px !important;
                svg{
                  width: 20px !important;
                }
              }
              a:last-child{
                margin-left: 10px;
                padding: 2px 15px;
              }
            }
          }
        }
        .pager{
          .prev,.next{
            width: 30px;
            height: 30px;
          }
          .nums{
            a{
              width: 30px;
              height: 30px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}